<template>
  <el-container class="full-container">
    <!-- 顶部导航栏 -->
    <el-header class="main-header">
      <div class="header-content">
        <div class="logo">
          <i class="el-icon-users"></i>
          <span class="system-title">用户管理系统</span>
        </div>
        <div class="header-actions">
          <el-badge :value="3" class="notification-badge">
            <el-button icon="el-icon-bell" circle size="mini" class="header-btn"></el-button>
          </el-badge>
          <el-dropdown trigger="click" class="user-dropdown">
            <span class="user-info">
              <el-avatar icon="el-icon-user" class="user-avatar"></el-avatar>
              <span class="username">管理员</span>
              <i class="el-icon-caret-down"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item>系统设置</el-dropdown-item>
              <el-dropdown-item divided>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </el-header>

    <el-container class="content-container">
      <!-- 侧边栏导航 -->
      <el-aside width="220px" class="sidebar">
        <el-menu
            default-active="1-3"
            class="sidebar-menu"
            @open="handleOpen"
            @close="handleClose"
            background-color="#2c3e50"
            text-color="#b8c7ce"
            active-text-color="#ffffff"
            unique-opened
            :collapse-transition="false"
            router
        >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>系统管理</span>
          </template>
          <el-menu-item-group title="基础设置">
            <el-menu-item index="/system-config">  <!-- 路由路径 -->
              <i class="el-icon-setting"></i>
              <span>系统配置</span>
            </el-menu-item>
            <el-menu-item index="/permission">  <!-- 路由路径 -->
              <i class="el-icon-key"></i>
              <span>权限管理</span>
            </el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="用户操作">
            <el-menu-item index="/admin/dept">  <!-- 用户管理路由路径 -->
              <i class="el-icon-user"></i>
              <span>部门管理</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>内容管理</span>
          </template>
          <el-menu-item index="/article">
            <i class="el-icon-document"></i>
            <span>文章管理</span>
          </el-menu-item>
          <el-menu-item index="/image">
            <i class="el-icon-picture"></i>
            <span>图片管理</span>
          </el-menu-item>
        </el-submenu>

        <el-menu-item index="3" disabled>
          <i class="el-icon-document"></i>
          <span>日志管理</span>
        </el-menu-item>

        <el-menu-item index="/system-setting">
          <i class="el-icon-setting"></i>
          <span>系统设置</span>
        </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 主内容区域 - 路由视图 -->
      <el-main class="main-content">
        <!-- 路由视图：会根据当前路由显示对应的组件 -->
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "UserManagementSystem",
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>

<style scoped>
/* 保持原有样式不变 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.full-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.main-header {
  background-color: #2c3e50;
  color: #ffffff;
  height: 60px;
  padding: 0 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.logo {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
}

.logo i {
  font-size: 24px;
  margin-right: 10px;
  color: #409EFF;
}

.system-title {
  letter-spacing: 0.5px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.header-btn {
  color: #b8c7ce;
  background-color: rgba(255, 255, 255, 0.1);
  transition: all 0.3s;
}

.header-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.notification-badge {
  position: relative;
}

.user-dropdown {
  cursor: pointer;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-avatar {
  width: 36px;
  height: 36px;
  background-color: #409EFF;
}

.username {
  font-size: 14px;
}

.content-container {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.sidebar {
  background-color: #2c3e50;
  color: #ffffff;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
}

.sidebar-menu {
  border-right: none;
  height: 100%;
  padding-top: 15px;
}

.el-menu-item, .el-submenu__title {
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  transition: all 0.2s;
}

.el-menu-item i, .el-submenu__title i {
  margin-right: 10px;
  width: 20px;
  text-align: center;
}

.el-menu-item:hover, .el-submenu__title:hover {
  background-color: #1a252f !important;
}

.el-menu-item.is-active {
  background-color: #3498db !important;
}

.main-content {
  background-color: #f5f7fa;
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}


</style>
